<template lang="pug">
  van-dialog(style="overflow:auto" v-model="dialogVisible" :title="dialogTitle" :closeOnClickOverlay="true" :show-confirm-button="false" :beforeClose="dialogClose")
    div(style="min-height:30px;" v-loading="dialogLoading" )
      view-template-form(v-if="!dialogLoading" :properties="dialogProperties" ref="dialogComponent"  :dragList="dialogList" :sortable="sortable")
    van-row.mt-3
      van-col(:span="12").text-right.pr-5
        van-button(type="default" @click="dialogCancel" :nativeType="'button'") 取 消
      van-col(:span="12").text-left.pl-5
        van-button(type="info" @click="dialogConfirm" :nativeType="'button'") 确 定
</template>
<script>
import viewTemplateForm from '../../../../../../operatePage/viewTemplate/viewTemplateForm'

export default {
  components: {
    viewTemplateForm: function () {
      return Promise.resolve(viewTemplateForm)
    }
  },
  props: ['dialogProperties', 'dialogTitle', 'dialogList', 'sortable', 'dialogLoading', 'dialogHeight', 'dialogWidth'],
  data() {
    return {
      dialogVisible: true
    }
  },
  methods: {
    dialogClose() {
      this.$emit('dialogCancel')
    },
    dialogCancel() {
      this.$emit('dialogCancel')
    },
    dialogConfirm() {
      let validate = this.$refs.dialogComponent.validate()
      // let dialogTemplate = this.$refs.dialogComponent && this.$refs.dialogComponent.$refs.dialogForm
      this.$emit('dialogConfirm', validate)
    }
  },
  mounted() {
    if (this.dialogWidth) {
      this.$el.style.width = this.dialogWidth
    }
    
    if (this.dialogHeight) {
      this.$el.style.height = this.dialogHeight
    }
  }
}
</script>
